<script lang="tsx">
import { ComponentOptions, defineComponent, h, toRef, Ref, watch } from "vue";
import { componentMap } from "../comp";
import { ElFormItem, ElCol } from "element-plus";
import { setCurrentConfigItem, useCurrentConifgItem } from "../observer";
import { FormConfigItem } from "../type";
export default defineComponent({
  name: "DraggableItem",
  props: {
    config: {},
  },
  setup(props, { emit }) {
    const currentConfigItem = useCurrentConifgItem();
    const config = toRef(props, "config") as Ref<FormConfigItem>;
    const comp = config.value.__config__.tag as string;

    function handleItemClick() {
      setCurrentConfigItem(config.value);
    }
    return () => {
      const ele = h(componentMap.get(comp) as ComponentOptions, {
        "onUpdate:modelValue": (value: any) => {
          emit("changeModel", value);
        },
        ...config.value
      });
      return (
        <div
          class={[
            "form_item_warp",
            currentConfigItem.value?.index === config.value.index
              ? "current_item"
              : "",
          ]}
          onClick={() => handleItemClick()}
        >
          <ElFormItem {...config.value?.__config__}>{ele}</ElFormItem>
        </div>
      );
    };
  },
});
</script>
<style lang="less" scoped>
.form_item_warp {
  width: 100%;
  padding: 20px;
  background: pink;
}
.current_item {
  background: skyblue;
}
</style>
